<div class="mat-select-trigger" cdk-overlay-origin (click)="toggle()" #origin="cdkOverlayOrigin" #trigger>
  <span
    class="mat-select-placeholder"
    [class.mat-floating-placeholder]="_selectionModel.hasValue()"
    [@transformPlaceholder]="_getPlaceholderAnimationState()"
    [style.opacity]="_getPlaceholderOpacity()"
    [style.width.px]="_selectedValueWidth"> {{ placeholder }} </span>
  <span class="mat-select-value" *ngIf="_selectionModel.hasValue()">
    <span class="mat-select-value-text">{{ triggerValue }}</span>
  </span>

  <span class="mat-select-arrow"></span>
  <span class="mat-select-underline"></span>
</div>

<ng-template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="close()"
  backdropClass="cdk-overlay-transparent-backdrop" [positions]="_positions" [minWidth]="_triggerWidth"
  [offsetY]="_offsetY" (attach)="_onAttached()" (detach)="close()">
  <div class="mat-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()"
    (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin"
      [class.mat-select-panel-done-animating]="_panelDoneAnimating" [ngClass]="'mat-' + color">
    <div class="mat-select-content" [@fadeInContent]="'showing'" (@fadeInContent.done)="_onFadeInDone()">
      <ng-content></ng-content>
    </div>
  </div>
</ng-template>
